<template>
      <el-table
        :data="tableData"
        class="MatchTable">
        <el-table-column
          label="ID"
          width="120" >
          <template slot-scope="scope">
            <i class="iconfont icon-ID"></i>
            <span style="margin-left: 10px">{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="机构"
          width="180">
          <template slot-scope="scope">
            <i class="iconfont icon-club" style="font-size: 24px;"></i>
            <span style="margin-left: 10px">{{scope.row.club}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="机构"
          width="240">
          <template slot-scope="scope">
            <i class="iconfont icon-upstage" style="font-size: 24px;"></i>
            <span style="margin-left: 10px">{{scope.row.match}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="裁判长"
          width="120">
          <template slot-scope="scope">
            <i class="iconfont icon-referee" style="font-size: 24px;"></i>
            <span style="margin-left: 10px">{{scope.row.referee}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="比赛时间"
          width="180">
          <template slot-scope="scope" >
            <i class="iconfont icon-time" style="font-size: 24px;"></i>
            <span style="margin-left: 10px">{{scope.row.date}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="状态"
          width="120">
          <template slot-scope="scope">
            <i class="iconfont icon-zhuangtai" style="font-size: 24px;"></i>
            <span style="margin-left: 10px">{{scope.row.state}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="是否签到"
          width="120">
          <template slot-scope="scope" style="text-align: center;">
            <i v-if="scope.row.sign==1" class="iconfont icon-sign" style="font-size: 28px;"></i>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="360">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="handleManage(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="mini"
              @click="handleCheck(scope.$index, scope.row)">查看</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            <el-button
              size="mini"
              @click="handleLayout(scope.$index, scope.row)" v-show="scope.$index==2">编排</el-button>
          </template>
        </el-table-column>
      </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          id:'1',
          club:'461俱乐部',
          match:'2017招商银行职工联赛',
          referee:'王五',
          date: '2016-05-02',
          state:'已结束',
          sign:'1',
        }, {
          id:'2',
          club:'461俱乐部',
          match:'2017招商银行职工联赛',
          referee:'王五',
          date: '2016-05-04',
          state:'正在比赛',
          sign:'0',
        }, {
          id:'3',
          club:'461俱乐部',
          match:'2018东风杯挑战赛',
          referee:'李四',
          date: '2016-05-01',
          state:'已发布',
          sign:'1'
        }, {
          id:'4',
          club:'461俱乐部',
          match:'xxx2018超级联赛',
          referee:'张三',
          date: '2016-05-03',
          state:'未发布',
          sign:'0'
        }]
      }
    },
    methods: {
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      },
      handleManage(index,row){
        this.$router.push('/index/match/AddMatchDetail')
      },
      handleCheck(index,row){
        this.$router.push('/index/match/MatchDetail')
      },
      handleLayout(index,row){
        this.$router.push('/index/match/Layout')
      },
    }
  }
</script>

<style scoped>
  .MatchTable{
    width: 80%;
    margin-top: 50px;
    margin-left: 40px;
  }
</style>
